<template>
  <div class="rice_page">
    <div class="inp_box">
      <div class="address_box">
        <!-- <div class="a_left">
                <div class="loaction">{{locations}}</div>
                <img class="image" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/back.png" alt="">
            </div> -->
        <div class="inp" @click="toSearch">
          <img
            src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/2.png"
            alt=""
            class="se"
          />
          <div class="title">点击搜索...</div>
        </div>
      </div>
      <img
        @click="toKefu"
        class="kefu"
        src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/3.png"
        alt=""
      />
    </div>
    <div class="swiper_box">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <div class="banner_img">
            <img :src="Config_ysy.img_url + item.image" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="tongzhi">
      <div class="t_left">
        <img
          src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/5.png"
          alt=""
        />
      </div>
      <div
        class="t_right"
        v-for="(item, index) in t_content.slice(0, 1)"
        :key="index"
      >
        {{ item.content }}
      </div>
    </div>
    <!-- 视频 -->
    <div class="shop-video">
      <video-player
        class="video-player vjs-custom-skin exemption"
        ref="videoPlayer"
        poster
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </div>
    <div class="goods_box">
      <div
        class="goods_item"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="goodsDetail(item)"
      >
        <img :src="Config_ysy.img_url + item.images[0]" alt="" />
      </div>
    </div>
    <div class="fenxian" @click="tofx()">
      <img
        src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/fenxian.png"
        alt=""
      />
    </div>
    <div class="rice_video">
      <div class="rice_top">
        <img
          class="left_img"
          src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/10.png"
          alt=""
        />
        <img
          class="right_img"
          src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/11.png"
          alt=""
        />
      </div>
      <div class="rice_gde">
        <div class="vide_left" @click="shows1">
          <img
            src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/12.png"
            alt=""
            class="exemptions"
          />
          <img
            src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/play.png"
            alt=""
            class="play"
          />
        </div>
        <div class="vide_right" @click="shows2">
          <img
            src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/13.png"
            alt=""
            class="exemptionss"
          />
          <img
            src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/play.png"
            alt=""
            class="play"
          />
        </div>
      </div>
      <div class="show_v" v-if="video1" style="margin-top: 0.7rem">
        <div class="close" @click="close">关闭</div>
        <video-player
          class="video-player vjs-custom-skin exemption"
          ref="videoPlayer"
          poster
          :playsinline="true"
          :options="playerOptionss"
        ></video-player>
      </div>
      <div class="show_vs" v-if="video2">
        <div class="close" @click="close1">关闭</div>
        <video-player
          class="video-player vjs-custom-skin exemption"
          ref="videoPlayer"
          poster
          :playsinline="true"
          :options="playerOptionsss"
        ></video-player>
      </div>
      <div class="cpcd_box">
        <div class="cpcd_top">
          <img
            src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/15.png"
            alt=""
          />
        </div>
        <div class="cpcd_content">
          <img
            src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/16.png"
            alt=""
          />
        </div>
      </div>
      <div class="wen_box">
        <div
          :class="currbent == index ? 'classify_ative' : 'classify'"
          v-for="(item, index) in wenList"
          :key="index"
          @click="changTab(index, item.id)"
        >
          <div class="title">{{ item.name }}</div>
          <div class="tiao"></div>
        </div>
      </div>
      <div class="wen_list">
        <div
          class="wen_item"
          v-for="(item, index) in zixunList"
          :key="index"
          @click="toArticle(item.id)"
        >
          <div class="item_left">
            <div class="title">{{ item.title }}</div>
            <div class="sub">{{ item.subtitle }}</div>
            <div class="bot">更新时间:{{ item.addtime | formatDate3 }}</div>
          </div>
          <div class="item_right">
            <img :src="Config_ysy.img_url + item.a_image" alt="" />
          </div>
        </div>
      </div>
      <div class="bottom-tab">
        <div
          class="bottom-tab-item-sider"
          v-for="(item, index) in bottomTabLists"
          :key="index"
          @click="changeTab(item.id)"
        >
          <img
            v-if="curTab == item.id"
            class="first-img"
            :src="item.imgOn"
            alt=""
          />
          <img
            v-if="curTab != item.id"
            class="first-img"
            :src="item.imgOff"
            alt=""
          />
          <span
            :class="
              curTab == item.id ? 'text-position text-ons' : 'text-position'
            "
            >{{ item.name }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import {
  mjlb,
  mjgg,
  mjzsp,
  mjgoods,
  mjwc,
  mjwz,
  mjlg,
} from "../../sever/request";
import { formatDate } from "../../untils/date";
export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      locations: "昆明市",
      banner: [
        {
          img: "https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/4.png",
        },
      ],
      t_content:
        "这也还是平台公告这也还是平台公告!!这也还是平台公告这也还是平台公告!",
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/%E4%BC%9A%E8%AF%9D%E6%96%87%E4%BB%B6_1634554950.MP4
          },
        ],
        poster:
          "https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/6.png", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "视频无法播放", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerOptionss: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "视频无法播放", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerOptionsss: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "视频无法播放", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      goodsList: [
        {
          image:
            "https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/8.png",
        },
        {
          image:
            "https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/9.png",
        },
      ],
      wenList: [
        { name: "胚芽米剖析" },
        { name: "营养咨询" },
        { name: "价格优势" },
      ],
      currbent: 0,
      zixunList: [
        {
          title: "籼米价格走势现状如何？",
          sub: "籼米的社会市场价值描述籼米的社会市场价值描述",
          time: "2021-12-11",
          img: "https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/17.png",
        },
        {
          title: "籼米价格走势现状如何？",
          sub: "籼米的社会市场价值描述籼米的社会市场价值描述",
          time: "2021-12-11",
          img: "https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/17.png",
        },
        {
          title: "籼米价格走势现状如何？",
          sub: "籼米的社会市场价值描述籼米的社会市场价值描述",
          time: "2021-12-11",
          img: "https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/17.png",
        },
      ],
      curTab: 1,
      bottomTabLists: [
        {
          id: 1,
          name: "首页",
          imgOff: require("../../assets/tabber/index.png"),
          imgOn: require("../../assets/tabber/index_select.png"),
          url: "/pages/center/ai",
        },
         {
          id: 2,
          name: "任务",
          imgOff: require("../../assets/tabber/sever.png"),
          imgOn: require("../../assets/tabber/sever_select.png"),
          // url: "/pages/center/center",
          center: true,
        },
        {
          id: 3,
          name: "商城",
          imgOff: require("../../assets/tabber/shop.png"),
          imgOn: require("../../assets/tabber/shop_select.png"),
          // url: "/pages/center/cate",
        },
       
        {
          id: 4,
          name: "课程",
          imgOff: require("../../assets/tabber/course.png"),
          imgOn: require("../../assets/tabber/course_select.png"),
          // url: "/pages/center/cart",
        },
        // {
        //   id: 5,
        //   name: "消息",
        //   imgOff: require("../../assets/newTab/news.png"),
        //   imgOn: require("../../assets/newTab/news_select.png"),
        //   // url: "/pages/center/user",
        // },
        {
          id: 5,
          name: "我的",
          imgOff: require("../../assets/tabber/mine.png"),
          imgOn: require("../../assets/tabber/mine_select.png"),
          // url: "/pages/center/user",
        },
      ],
      token: "123",
      shop_id: null,
      type_id: null,
      video1: false,
      video2: false,
    };
  },
  //  computed: {
  //     player() {
  //         return this.$refs.videoPlayer.player
  //         this.$refs.videoPlayer.player.play() // 播放
  //        this.$refs.videoPlayer.player.pause() // 暂停
  //         this.$refs.videoPlayer.player.src(src) // 重置进度条
  //     }
  // },

  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy.MM.dd");
    },
    formatDate2(time) {
      var date = new Date(time);
      return formatDate(date, "hh:mm:ss");
    },
    formatDate3(time) {
      time = time * 1000;
      var date = new Date(time);
      return formatDate(date, "yyyy年MM月dd日 hh:mm:ss");
    },
  },
  moutend() {
    let store = this.$route.query;
    if (store.shop_id != undefined) {
      this.shop_id = store.shop_id;
    }
    if (store.token != "" && store.token != undefined) {
      this.token = store.token;
    }
  },
  created() {
    let store = this.$route.query;
    if (store.shop_id != undefined) {
      this.shop_id = store.shop_id;
    }
    if (store.token != "" && store.token != undefined) {
      this.token = store.token;
    }
    this.getMjlb();
    this.getMjg();
    this.getMjzsp();
    this.getGoods();
    this.getWz();
    this.getMjlg();
    if (this.currbent == 0) {
      this.type_id = 2;
      this.getWzs(this.type_id);
    }
    // this.getWzs()
  },
  methods: {
    getMjlb() {
      mjlb({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.banner = res.data.data;
        }
      });
    },
    toSearch() {
      this.$router.push({
        path: "../search",
        query: { token: this.token, shop_id: this.shop_id },
      });
    },
    toKefu() {
      console.log("llll");
      uni.navigateTo({
        url: "/pages/user_chat/news_list",
      });
    },

    getMjg() {
      mjgg({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.t_content = res.data.data;
        }
      });
    },
    getMjzsp() {
      mjzsp({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.playerOptions.sources[0].src = res.data.data.file;
        }
      });
    },
    getMjlg() {
      mjlg({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.playerOptionss.sources[0].src = res.data.data.freshrice.file;
          this.playerOptionsss.sources[0].src =
            res.data.data.germinatedrice.file;
        }
      });
    },
    shows1() {
      this.video1 = true;
    },
    shows2() {
      this.video1 = true;
    },
    close() {
      this.video1 = false;
    },
    close1() {
      this.video2 = false;
    },
    getGoods() {
      mjgoods({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.goodsList = res.data.data;
        }
      });
    },
    goodsDetail(item) {
      uni.navigateTo({
        url:
          "/pages/productDetail/productDetail?id=" +
          item.goods_id +
          "&type=1&goods_max_price=" +
          item.spec[0].line_price +
          "&goods_min_price=" +
          item.spec[0].goods_price,
      });
    },
    getWz() {
      mjwc({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.wenList = res.data.data;
        }
      });
    },
    changTab(index, id) {
      this.currbent = index;
      if (index == 0) {
        id = 2;
        mjwz({
          token: this.token,
          shop_id: this.shop_id,
          type_id: id,
        }).then((res) => {
          if (res.data.code === 1) {
            this.zixunList = res.data.data;
          }
        });
      }
      mjwz({
        token: this.token,
        shop_id: this.shop_id,
        type_id: id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.zixunList = res.data.data;
        }
      });
    },
    getWzs() {
      mjwz({
        token: this.token,
        shop_id: this.shop_id,
        type_id: this.type_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.zixunList = res.data.data;
        }
      });
    },
    toArticle(id) {
      this.$router.push({
        path: "../article",
        query: { token: this.token, id: id },
      });
    },
    tofx() {
      uni.navigateTo({
        url: "/pages/share/share",
      });
    },
    //底部导航
    changeTab(id) {
      this.curTab = id;
      if (id == 2) {
        uni.navigateTo({
          url: "/pages/center/center",
        });
      } else if (id == 3) {
        uni.navigateTo({
          url: "/pages/saasShop/equity",
        });
      } else if (id == 4) {
        uni.navigateTo({
          url: "/pages/center/cart",
        });
      } else if (id == 5) {
        uni.navigateTo({
          url: "/pages/center/user",
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.rice_page {
  width: 10rem;
  background: linear-gradient(0deg, #9dc524 0%, #e0ff6f 100%);
  .inp_box {
    width: 10rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.933333rem 0.4rem 0;
    background: #9dc524;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    .address_box {
      width: 8rem;
      height: 0.986667rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: rgba(241, 241, 241, 0.47);
      border: 0.04rem solid #ffffff;
      border-radius: 0.48rem;
      //   .a_left{
      //         width: 1.68rem;
      //         height: .8rem;
      //         background: #FFFFFF;
      //         border: 1px solid #F1F1F1;
      //         border-radius: .4rem;
      //         display: flex;
      //         justify-content: flex-start;
      //         align-items: center;
      //         padding: 0 0 0 .266667rem;
      //         .a_left{
      //             font-size: .32rem;
      //             color: #545252;
      //         }
      //         .image{
      //             width: .226667rem;
      //             height: .133333rem;
      //             margin-left: .133333rem;
      //         }
      //   }
      .inp {
        width: 7.6rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0.533333rem;
        .title {
          font-size: 0.32rem;
          color: #f6f6f6;
          margin-left: 0.266667rem;
        }
        .se {
          width: 0.466667rem;
          height: 0.466667rem;
          margin-left: 0.133333rem;
        }
      }
    }
    .kefu {
      width: 0.666667rem;
      height: 0.666667rem;
      margin-left: 0.4rem;
    }
  }
  .swiper_box {
    width: 9.2rem;
    height: 4rem;
    margin: 0 0.4rem;
    padding-top: 2.3rem;
    .banner_img {
      width: 9.2rem;
      height: 4rem;
      border-radius: 0.213333rem;
      img {
        width: 9.2rem;
        height: 4rem;
        border-radius: 0.213333rem;
      }
    }
  }
  .tongzhi {
    width: 8.666667rem;
    padding: 0 0.266667rem;
    margin: -0.153333rem auto 0;
    height: 1.04rem;
    background: #ffffff;
    border-radius: 0.52rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .t_left {
      img {
        width: 0.693333rem;
        height: 0.693333rem;
      }
    }
    .t_right {
      margin-left: 0.266667rem;
      font-size: 0.32rem;
      font-family: Heiti SC;
      font-weight: 300;
      color: #545252;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  //视频样式
  .shop-video {
    width: 10rem;
    height: 5.44rem;
    position: relative;
    // margin-top: .533333rem;
    overflow: hidden;
    // object-fit: fill;
    vertical-align: middle;
    .exemption {
      width: 100%;
      height: 5.44rem;
    }
  }
  .goods_box {
    width: 9.2rem;
    height: 7.293333rem;
    background: url("https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/7.png")
      no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.133333rem;
    margin: 0.666667rem auto 0;
    .goods_item {
      width: 50%;
      height: 6.76rem;
      img {
        width: 100%;
        height: 6.76rem;
      }
    }
  }
  .fenxian {
    position: fixed;
    top: 12.666667rem;
    right: 0.133333rem;
    img {
      width: 1.48rem;
      height: 1.413333rem;
    }
  }
  .rice_video {
    width: 10rem;
    margin-top: 0.266667rem;
    .rice_top {
      margin: 0 1.026667rem 0 1.56rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left_img {
        width: 2.24rem;
        height: 1.56rem;
      }
      .right_img {
        width: 3.333333rem;
        height: 1.56rem;
      }
    }
    .rice_gde {
      width: 9.706667rem;
      margin: -0.6rem auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .vide_left {
        width: 4.84rem;
        height: 3.946667rem;
        //   position: relative;
        margin-top: 0.533333rem;
        //   overflow: hidden;
        // object-fit: fill;
        //  vertical-align: middle;
        position: relative;
        .exemptions {
          width: 100%;
          height: 3.946667rem;
        }
        .play {
          width: 0.933333rem;
          height: 0.933333rem;
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
      .vide_right {
        width: 4.813333rem;
        height: 3.946667rem;
        margin-left: 0.053333rem;
        //   position: relative;
        margin-top: 0.533333rem;
        //   overflow: hidden;
        // object-fit: fill;
        //  vertical-align: middle;
        position: relative;
        .exemptionss {
          width: 100%;
          height: 3.946667rem;
        }
        .play {
          width: 0.933333rem;
          height: 0.933333rem;
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
  .show_v,
  .show_vs {
    width: 10rem;
    margin-top: 0.266667rem;
    height: 5.44rem;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    .close {
      background: orangered;
      font-size: 0.346667rem;
      color: #ffffff;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      padding: 0.266667rem;
    }
    .exemption {
      width: 100%;
      height: 5.44rem;
    }
  }
  .cpcd_box {
    width: 10rem;
    margin-top: 0.866667rem;
    .cpcd_top {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 3.506667rem;
        height: 1.12rem;
      }
    }
    .cpcd_content {
      width: 100%;
      img {
        width: 100%;
        height: 4.506667rem;
      }
    }
  }
  .wen_box {
    width: 9.2rem;
    margin: 0.533333rem 0.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .classify {
      flex: 1;
      height: 1.333333rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        font-size: 0.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #fff;
      }
    }
    .classify_ative {
      flex: 1;
      height: 1.333333rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        font-size: 0.4rem;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
      }
      .tiao {
        width: 0.653333rem;
        height: 0.093333rem;
        background: #fab53b;
        border-radius: 0.053333rem;
        margin-top: 0.08rem;
      }
    }
  }
  .wen_list {
    margin: 0.533333rem auto 0;
    padding-bottom: 2.4rem;
    width: 9.2rem;
    .wen_item {
      width: 8.666667rem;
      padding: 0.266667rem;
      background: #ffffff;
      box-shadow: 0px 0px 0.213333rem 0.053333rem rgba(184, 188, 186, 0.26);
      border-radius: 0.4rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 0.4rem;
      .item_left {
        .title {
          width: 3.606667rem;
          font-size: 0.32rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #091023;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .sub {
          width: 5.2rem;
          font-size: 0.293333rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #999999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 0.266667rem;
        }
        .bot {
          font-size: 0.266667rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #999999;
          margin-top: 0.266667rem;
        }
      }
      .item_right {
        margin-left: 0.666667rem;
        img {
          width: 2.666667rem;
          height: 2.133333rem;
          border-radius: 0.2rem;
        }
      }
    }
  }
  //  底部导航
  .bottom-tab {
    position: fixed;
    z-index: 3000;
    // background-image: url(../../assets/image/tab.png);
    background-color: #f7f6f6;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bottom-tab-item-center {
      width: 24%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: -0.133333rem;
      .first-img {
        width: 1.333333rem;
        height: 1.333333rem;
        margin-top: -0.8rem;

        border-radius: 50%;
      }
      .text-position {
        margin-top: 0.066667rem;
        font-size: 0.25rem;
        color: #757575;
      }
      .text-on {
        color: #b49828;
      }
      .text-ons {
        color: #0eb173;
      }
    }
    .bottom-tab-item-sider {
      width: 15%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      .jiao {
        position: absolute;
        top: -0.186667rem;
        display: block;
        right: 0.08rem;
        min-width: 0.4rem;
        height: 0.4rem;
        padding: 0 0.026667rem;
        border-radius: 50%;
        background-color: #f5222d;
        text-align: center;
        line-height: 0.4rem;
        font-size: 0.373333rem;
        color: #ffffff;
      }
      .first-img {
        width: 0.613333rem;
        height: 0.613333rem;
      }
      .text-position {
        margin-top: 0.16rem;
        font-size: 0.25rem;
        color: #757575;
      }
      .text-on {
        color: #f7992b;
      }
      .text-ons {
        color: #0eb173;
      }
    }
  }
}
</style>